<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>File Downloader</title>
  <link rel="stylesheet" href="styles/theme.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 420px;
      min-height: 300px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      padding: 16px;
      background-color: var(--background-color);
    }

    .container {
      background: var(--surface-color);
      border-radius: 12px;
      box-shadow: 0 2px 12px var(--shadow-color);
      overflow: hidden;
    }

    /* 导航栏样式 */
    .nav-tabs {
      display: flex;
      background: var(--surface-color);
      padding: 8px 16px 0;
      border-bottom: 1px solid var(--border-color);
      gap: 8px;
    }

    .nav-tab {
      padding: 12px 20px;
      color: var(--text-secondary);
      cursor: pointer;
      border-radius: 8px 8px 0 0;
      transition: all 0.3s ease;
      position: relative;
      font-weight: 500;
    }

    .nav-tab:hover {
      color: var(--primary-color);
      background: var(--hover-color);
    }

    .nav-tab.active {
      color: var(--primary-color);
      background: var(--surface-color);
    }

    .nav-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--primary-color);
      border-radius: 2px;
    }

    /* 内容区域样式 */
    .tab-panel {
      padding: 20px;
      display: none;
    }

    .tab-panel.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    /* 输入框组样式 */
    .input-group {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }

    input[type="text"] {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
      background: var(--background-color);
      color: var(--text-primary);
    }

    input[type="text"]:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px var(--primary-color-alpha);
    }

    /* 按钮样式 */
    button {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      background: var(--primary-color);
      color: white;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px var(--shadow-color);
    }

    button:active {
      transform: translateY(0);
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* 进度条样式 */
    .progress-container {
      margin-top: 16px;
      background: var(--background-color);
      border-radius: 8px;
      overflow: hidden;
      height: 8px;
    }

    .progress-bar {
      height: 100%;
      background: var(--primary-color);
      transition: width 0.3s ease;
      border-radius: 8px;
    }

    /* 图片网格样式 */
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 16px;
      padding: 16px;
      max-height: 400px;
      overflow-y: auto;
    }

    .image-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.3s ease;
    }

    .image-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px var(--shadow-color);
    }

    .image-item.selected::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--primary-color);
      opacity: 0.3;
      z-index: 1;
    }

    .image-item.selected::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
      z-index: 2;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* 状态消息样式 */
    .status {
      margin-top: 12px;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .error-message {
      color: #ff4d4f;
      background: #fff2f0;
      border: 1px solid #ffccc7;
      padding: 12px;
      border-radius: 8px;
      margin-top: 16px;
    }

    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--background-color);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-secondary);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="nav-tabs">
      <div class="nav-tab active" data-tab="download">下载</div>
      <div class="nav-tab" data-tab="images">图片</div>
      <div class="nav-tab" data-tab="text">文本</div>
    </div>

    <div id="downloadTab" class="tab-panel active">
      <div class="input-group">
        <input type="text" id="downloadUrl" placeholder="输入文件URL或拖拽文件到此处">
        <button id="downloadBtn">
          <span>下载</span>
        </button>
      </div>
      <div id="progressContainer" class="progress-container" style="display: none;">
        <div id="progressBar" class="progress-bar" style="width: 0%"></div>
      </div>
      <div id="status" class="status"></div>
    </div>

    <div id="imagesTab" class="tab-panel">
      <div class="image-grid"></div>
      <button class="download-selected" style="margin-top: 16px; width: 100%;">
        <span>下载选中图片</span>
        <span class="selected-count"></span>
      </button>
    </div>

    <div id="textTab" class="tab-panel">
      <div class="coming-soon">
        文本提取功能即将推出...
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
